<!--A Design by W3layouts 
Author: W3layout
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE html>
<html>
<head>
<title>Gridzilla A Entertainment Category Flat Bootstarp Resposive Website Template | Home :: w3layouts</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />	
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<!--//fonts-->
</head>
<body> 
<!--header-->
	<div class="header">
			<div class="container">
			<div class="header-top">
				<div class="logo">
					<a href="index.htm"><img src="images/logo.png" alt="" /></a>
				</div>
				<div class="search">
					<form>
						<input type="text" value="Enter your search..." onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '';}" >
						<input type="submit"  value="">
					</form>
				</div>
			<div class="clearfix"> </div>
		</div>
				<div class="top-nav">
				<span class="menu"> </span>
					<ul>
						<li class="active"><a href="index.htm" > HOME </a></li>
						<li><a href="about.htm" > ABOUT </a></li>
						<li><a href="blog.htm" > BLOG</a></li>						
						<li><a href="contact.htm" >CONTACT</a></li>
					</ul>
					<script>
						$("span.menu").click(function(){
							$(".top-nav ul").slideToggle(500, function(){
							});
						});
					</script>
				</div>			
			</div>
		</div>
	<!--banner-->
		<div class="banner">
			<div class="container">
			<div class="banner-grid">
				<div class="col-md-4 grid-banner">
					<a href="#small-dialog" class="popup-with-zoom-anim"><img class="img-responsive" src="images/si.jpg" alt="" />
						<div class="simple">
							<span class="plus"> </span>
						</div></a>
						</a>
				</div>
				
				<div class="col-md-4 grid-banner">
					<a href="#small-dialog" class="popup-with-zoom-anim"><img class="img-responsive" src="images/si1.jpg" alt="" />
						<div class="simple">
							<span class="plus"> </span>
						</div></a>
				</div>
				<div class="col-md-4 grid-banner">
					<a href="#small-dialog" class="popup-with-zoom-anim"><img class="img-responsive" src="images/si2.jpg" alt="" />
						<div class="simple">
							<span class="plus"> </span>
						</div></a>
				</div>
			<div class="clearfix"> </div>
			</div>
			</div>
			<div class="banner-grids">
			<div class="container">
				<div class="col-md-7 grid-banner-in">
					<img class="img-responsive" src="images/si3.jpg" alt="" />
				</div>
				<div class="col-md-5 grid-banner-in grid-banner-on">
					<div class="res-in">
						<img class="img-responsive" src="images/si4.jpg" alt="" />
					</div>
					<div class="res-in">
						<a href="news.htm" ><img class="img-responsive" src="images/si7.jpg" alt="" /></a>
					</div>
				</div>	
			<div class="clearfix"> </div>
			</div>
			<!---->
			<div class="banner-bottom">	
		  <div class="wmuSlider example1">
			   <div class="wmuSliderWrapper">
			 <article style="position: absolute; width: 100%; opacity: 0;"> 
			 <div class="container">
				   	<div class="banner-wrap">			
						<h1>Top iPhone Apps</h1>
						 <p>Lorem ipsum dolor sit amet, ne utinam discere blandit vim, at iusto facilisis mel. Cetero audire sea an, has ex quem prima omnium.</p>
						 <a href="#" class=" more"><span class="plus-on"> </span>MORE</a>
				   	 </div>
					 </div>
			</article>
			 <article style="position: absolute; width: 100%; opacity: 0;"> 
			 <div class="container">
				   	<div class="banner-wrap">
						<h1>Photo Shoot</h1>
						 <p>Lorem ipsum dolor sit amet, ne utinam discere blandit vim, at iusto facilisis mel. Cetero audire sea an, has ex quem prima omnium.</p>
						 <a href="#" class=" more"><span class="plus-on"> </span>MORE</a>
				   	 </div>
						</div>
			</article>
			 <article style="position: absolute; width: 100%; opacity: 0;"> 
			 <div class="container">
				   	<div class="banner-wrap">
					
						<h1>Big Buck Bunny</h1>
						 <p>Lorem ipsum dolor sit amet, ne utinam discere blandit vim, at iusto facilisis mel. Cetero audire sea an, has ex quem prima omnium.</p>
						 <a href="#" class=" more"><span class="plus-on"> </span>MORE</a>
				   	 </div>	
					 </div>
			</article>
			</div>
		</div>
	
		  <script src="js/jquery.wmuSlider.js"></script> 
			  <script>
       			$('.example1').wmuSlider({
					 pagination : false,
				});         
   		     </script> 	
		</div>
		</div>
		<!---->
		<div class="container">
			<div class="banner-grid">
				<div class="col-md-4 grid-banner">
					<a href="news.htm" ><img class="img-responsive" src="images/si8.jpg" alt="" />
					<div class="simple simple-sit">
						<span class="plus"> </span>
					</div></a>
				</div>
				<div class="col-md-4 grid-banner">
					<a href="#small-dialog" class="popup-with-zoom-anim"><img class="img-responsive" src="images/si5.jpg" alt="" />
					<div class="simple simple-sit">
							<span class="plus"> </span>
						</div></a>
				</div>
				<div class="col-md-4 grid-banner">
					<a href="#small-dialog" class="popup-with-zoom-anim"><img class="img-responsive" src="images/si6.jpg" alt="" />
					<div class="simple simple-sit">
							<span class="plus"> </span>
						</div></a>
				</div>
			<div class="clearfix"> </div>
			</div>
		</div>
	
		</div>   
	</div>
	<!-- caption-popup -->
		<div class="caption-popup">
				<div id="small-dialog" class="mfp-hide innercontent">
					<h1>Place content Here</h1>
					<img class="img-responsive" src="images/si3.jpg" title="postname" />
					<p>elit. Etiam sit amet nunc nec magna accumsan ultricies eget a leo. Praesent nec libero aliquet, malesuada nibh et, tincidunt arcu. Aenean porta faucibus nisl. Fusce ultrices nec purus eget consequat. Phasellus pharetra dignissim lacus id rhoncus. In malesuada et mi non mollis. </p>
					<a href="#" class="read-more"><span> </span>MORE</a>
				</div>
				 <script>
						$(document).ready(function() {
						$('.popup-with-zoom-anim').magnificPopup({
							type: 'inline',
							fixedContentPos: false,
							fixedBgPos: true,
							overflowY: 'auto',
							closeBtnInside: true,
							preloader: false,
							midClick: true,
							removalDelay: 300,
							mainClass: 'my-mfp-zoom-in'
						});
																						
						});
				</script>								  
				</div>
			<!----//fea-video---->
		</div>
		<!-- /caption-popup -->
		</div>
		<!---pop-up-box---->
				<link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
				<script src="js/jquery.magnific-popup.js" type="text/javascript"></script>
					<!---//pop-up-box---->
	<!---->
	<div class="content">
	<div class="container">
			<div class="portfolio-grid">
			<h2>A Theme Unlike Any Other. Simply Fantastic!</h2>
					<ul id="filters">
						<li class="active"><span class="filter " data-filter="app card icon set web">ALL</span> /</li>
						<li><span class="filter" data-filter="app"> News </span> /</li>
						<li><span class="filter" data-filter="card"> Design  </span> /</li>
						<li><span class="filter" data-filter="icon">Print</span> /</li>
						<li><span class="filter" data-filter="set"> Art </span> /</li>
						<li><span class="filter" data-filter="web"> Development </span></li>
					</ul>
					<div id="portfoliolist">
					<div class=" port-grid">
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon">
						    <img class="img-responsive" src="images/po.jpg" alt=""  />
						     <div class="simple-in">
							 <i class="plus-in"> </i>
								<ul class="social">
									<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
									<div class="clearfix"> </div>
								</ul>
						    </div></a>
							<div class="simple-out">
								<h4><a href="single.htm">Sticker Mule</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
						</div>
					</div>				
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						    <img class="img-responsive" src="images/po4.jpg" alt=""  />
							
						     <div class="simple-in sed">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>23</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>11</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
						<div class="simple-out">
								<h4><a href="single.htm">Big Buck Bunny</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>		
					<div class="portfolio card mix_all" data-cat="card" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po8.jpg"  alt="" />
						     
						     <div class="simple-in in-on">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Pinterest Icons</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>
				</div>	
				<div class="  port-grid">
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po1.jpg" alt=""  />
						    
						     <div class="simple-in sed">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">10 Amazing Websites</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>	
					<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po5.jpg" alt=""  />
						     
						     <div class="simple-in in-on">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Character Design</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>			
					<div class="portfolio set mix_all" data-cat="set" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po9.jpg" alt=""  />
						   
						     <div class="simple-in sed">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>		</a>
							<div class="simple-out">
								<h4><a href="single.htm">iPad 3 Review</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>
		                </div>
					</div>
					</div>
					<div class=" port-grid">
					<div class="portfolio web mix_all" data-cat="web" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po2.jpg" alt=""  />
						
						     <div class="simple-in in-on">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Top iPhone Apps</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po6.jpg" alt=""  />						    
						     <div class="simple-in">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Service Icons</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon">
						    <img class="img-responsive" src="images/po10.jpg" alt=""  />
						    
						     <div class="simple-in eight">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Social Media Buttons</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
						</div>
					</div>	
					</div>
					<div class=" port-grid">					
					<div class="portfolio icon mix_all" data-cat="icon" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						    <img class="img-responsive" src="images/po3.jpg" alt=""  />
						    
						     <div class="simple-in so-in">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>	</a>
							<div class="simple-out">
								<h4><a href="single.htm">Photo Shoot</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>		
					<div class="portfolio set mix_all" data-cat="set" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po7.jpg"  alt="" />						     
						     <div class="simple-in">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div>
							</a>
							<div class="simple-out">
								<h4><a href="single.htm">Wedding Card</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>							
		                </div>
					</div>				
					<div class="portfolio app mix_all" data-cat="app" style="display: inline-block; opacity: 1;">
						<div class="portfolio-wrapper ">		
							<a href="single.htm" class="b-link-stripe b-animate-go  thickbox play-icon ">
						     <img class="img-responsive" src="images/po11.jpg" alt=""  />
						     <div class="simple-in so-on">
							 <i class="plus-in"> </i>
								<ul class="social">
								<li><span> </span>857</li>
								<li><span class="text"> </span>11/1/2015</li>
								<li><span class="number"> </span>892</li>
								<div class="clearfix"> </div>
								</ul>
						    </div></a>
								 <div class="simple-out">
								<h4><a href="single.htm">Silver UI Kit</a></h4>
								<span>January 15, 2015  /  <a href="single.htm">news</a>, <a href="single.htm">contests</a></span>
								<p>Lorem ipsum dolor sit amet, te possim inimicus ius. Alii ullam at corper pri ad, per nulla luptatum te, in qui delenit nostrum. Nam ad labores.</p>
								<a href="#" class="read-more"><span> </span>MORE</a>
							</div>
		                </div>
					</div>	
					</div>	
			<!-- Script for gallery Here -->
				<script type="text/javascript" src="js/jquery.mixitup.min.js"></script>
					<script type="text/javascript">
					$(function () {
						
						var filterList = {
						
							init: function () {
							
								// MixItUp plugin
								// http://mixitup.io
								$('#portfoliolist').mixitup({
									targetSelector: '.portfolio',
									filterSelector: '.filter',
									effects: ['fade'],
									easing: 'snap',
									// call the hover effect
									onMixEnd: filterList.hoverEffect()
								});				
							
							},
							
							hoverEffect: function () {
							
								// Simple parallax effect
								$('#portfoliolist .portfolio').hover(
									function () {
										$(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
										$(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');				
									},
									function () {
										$(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
										$(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');								
									}		
								);				
							
							}
				
						};
						
						// Run the show!
						filterList.init();
						
						
					});	
					</script>
			<!-- Gallery Script Ends -->
			<div class="clearfix"> </div>
			</div>
		</div>
		
	</div>
	</div>
	<!--footer-->
	<div class="footer">
		<div class="container">
		<div class="footer-top">
			<ul class="social-ic-icons">
				<li><a href="#"><span> </span></a></li>
				<li class="dribble"><a href="#"><span> </span></a></li>
				<li class="facebook"><a href="#"><span> </span></a></li>
				<li class="print"><a href="#"><span> </span></a></li>					
			</ul> 
			<p class="footer-grid">Copyright &copy; 2015 Gridzilla Template by <a href="http://w3layouts.com/" target="_blank">W3layouts</a> </p>
			<div class="clearfix"> </div>
		</div>
		 </div>
	 </div>
</body>
</html>